
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>欢迎使用联信视频2.0 - Demo</title>
  <meta name="description" content="联信UMRtc视频会议系统，支持视频SDK、视频会议、直播等应用扩展">
  <link rel="stylesheet" href="assets/css/styles.css">
    
</head>

<body>
  <a href="docs" target="_blank">帮助</a>
  <div>
    <h4>连接方式</h4>
    <select id='connectType' onchange="onSelectConnectType()">
      <option value="sfufirst">SFU优先[默认]</option>
      <option value="sfu">仅SFU</option>
      <option value="p2pfirst">P2P优先</option>
      <option value="p2p">仅P2P</option>
    </select>
    房间号：<input id="roomid" type="text" name="roomid" value="room001">
    用户名：<input id="userName" type="text" name="userName" value="游客001">
    <button type="button" id='joinButton' onclick="joinRoom(roomid.value, userName.value)">加入会议</button>
    <button type="button" id='exitButton' class='hidden' onclick="exitRoom()">退出会议</button>
  </div>

  <div id="control">
    <button id='startAudioButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.audio, true)">音频</button>
    <button id='stopAudioButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.audio, false)">关闭音频</button>
    <button id='startVideoButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.video, true)">视频</button>
    <button id='stopVideoButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.video, false)">关闭视频</button>
    <button id='startScreenButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.screen, true)">屏幕</button>
    <button id='stopScreenButton' class='hidden' onclick="uv2.setMediaEnable(uv2.mediaType.screen, false)">关闭屏幕</button>
  </div>

  <div id='videoMedia'>
    <h4>本地视频</h4>
    <div id="localMedia"></div>

    <h4>远端视频</h4>
    <div id="remoteVideos" class="container"></div>
    <div id="remoteAudios"></div>
  </div>

  <!-- 引用client.min.js，会在全局环境下提供UmVideo2对象 -->
  <script src="dist/client.min.js"></script>
  <script>

    // 简化UmVideo2的写法
    // 如果在nodejs环境，可以写为： const uv2 = require('./client.min.js')
    const uv2 = window.UmVideo2
    let isInit = false

    // 工具函数，隐藏元素，需配合styles.css使用
    function hide(elem) {
      elem.className = 'hidden'
    }

    // 工具函数，显示元素，需配合styles.css使用
    function show(elem) {
      elem.className = ''
    }

    // 初始化环境。一般情况下，仅初始化一次即可，主要调用setup函数来配置UmVideo2。
    // 可以通过查看uv2.config来查看当前配置
    function initAll() {
      if (!isInit) {
        isInit = true
        uv2.setup({
          localMedia: localMedia, // 本地视频插入位置
          remoteVideos: remoteVideos, // 远端视频插入位置
          remoteAudios: remoteAudios, // 远端音频插入位置
        })
      }
    }

    // 加入房间，参数为房间名和用户名【可选】
    async function joinRoom(roomId, userName) {
      if (!isInit) initAll()

      // 加入房间，可以指定房间号、用户名、连接类型。后面是加入成功后的回调。
      await uv2.joinRoom(roomId, userName, connectType.value, (ret)=>{
        console.log('join room', ret.result)

        // 界面上控件显示与隐藏
        show(startAudioButton)
        hide(stopAudioButton)
        show(startVideoButton)
        hide(stopVideoButton)
        show(startScreenButton)
        hide(stopScreenButton)
        show(exitButton)
        hide(joinButton)

        // 以下是事件回调处理，用于控制界面显示。如：
        // 开启桌面事件，此时将显示“关闭桌面”，并隐藏“桌面”按钮，防止重复添加桌面分享。其它事件类似。
        uv2.on(uv2.EVENTS.startScreen, () => {
          hide(startScreenButton)
          show(stopScreenButton)
        })

        uv2.on(uv2.EVENTS.stopScreen, () => {
          hide(stopScreenButton)
          show(startScreenButton)

        })

        uv2.on(uv2.EVENTS.stopAudio, () => {
          hide(stopAudioButton)
          show(startAudioButton)

        })

        uv2.on(uv2.EVENTS.startAudio, () => {
          hide(startAudioButton)
          show(stopAudioButton)
        })

        uv2.on(uv2.EVENTS.startVideo, () => {
          hide(startVideoButton)
          show(stopVideoButton)
        })

        uv2.on(uv2.EVENTS.stopVideo, () => {
          hide(stopVideoButton)
          show(startVideoButton)
        })
        
        uv2.on(uv2.EVENTS.exitRoom, () => {
          show(joinButton)
          hide(exitButton)
        })

        // 添加对端媒体时回调。如果在setup时，不指定remoteVideos或remoteAudios，可以在这个事件里自行插入界面。
        uv2.on(uv2.EVENTS.remoteMediaAdd, (elem) => {
          console.log('remote media is added: ', elem.id, elem)
        })
      })
    }

    // 离开房间
    function exitRoom() {
      uv2.exitRoom()
    }
  </script>
</body>
</html> 
